<template>
    <a-modal :visible="true" :title="state.formData.id?'更新客户':'新增客户'" @ok="handleOk" @cancel="handleCancel">
        <a-form ref="formRef" :model="state.formData" :labelCol="{style:'width:80px'}">
          <a-form-item label="真实姓名" name="realName" :rules="[{required:true,message:'必填'}]">
             <a-input v-model:value="state.formData.realName" />
          </a-form-item>
          <a-form-item label="手机号" name="mobile" :rules="[{required:true,message:'必填'}]">
             <a-input v-model:value="state.formData.mobile" />
          </a-form-item>
          <a-form-item label="昵称" name="nickName">
             <a-input v-model:value="state.formData.nickName" />
          </a-form-item>
          <a-form-item label="性别" name="gender">
            <a-radio-group v-model:value="state.formData.gender">
                <a-radio  :value="0">女</a-radio>
                <a-radio  :value="1">男</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="累计消费" name="totalCostAmt">
            <a-input-number v-model:value="state.formData.totalCostAmt" :min="0" :max="9999999" ></a-input-number>
          </a-form-item>
          <a-form-item label="生日" name="birthday">
            <a-date-picker  v-model:value="state.formData.birthday" valueFormat="YYYY-MM-DD"></a-date-picker>
          </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive,onMounted,ref } from "vue";
import { WxUserService } from "@/service";
import { WxUserTypes} from "@/type"
const formRef = ref();
const state = reactive<{
    formData:any
}>({
    formData:{
        gender:0,
        totalCostAmt:0,
    }
})

const props = withDefaults(defineProps<{
    currentWxUser?:Partial<WxUserTypes.IWxUserItem>;
}>(),{
    currentWxUser:():Partial<WxUserTypes.IWxUserItem>=>({})
})

const emit = defineEmits<{
    (e:"ok"):void,
    (e:"cancel"):void
}>()

onMounted(()=>{
    state.formData = {...props.currentWxUser}
})

const handleOk = ()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
        if(valid){
            console.log(state.formData)
            let res
            if(state.formData.id){
                res =await WxUserService.updateWxUser(state.formData);
            }else{
                res =await WxUserService.addWxUser(state.formData);
            }
            if(res.code===0){
                emit("ok");
            }
        }

    })
} 

const handleCancel = ()=>{
    emit("cancel");
}

</script>